<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <div class="lg:w-2/12 w-full h-full p-2 shadow">
      <ma-tree-slider
        :data="sliderData"
        :search-placeholder="$t('maResource.searchResource')"
        :field-names="{ title: 'title', key: 'key' }"
        @click="handlerClick"
        icon="icon-folder"
        v-model="defaultKey"
      />
    </div>

    <div class="lg:w-10/12 w-full lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <!-- 表格按钮后置扩展 -->
        <template #tableAfterButtons>
          <a-input-group v-if="mode === 'window'">
            <a-button @click="selectAll"><template #icon><icon-select-all /></template>全选</a-button>
            <a-button @click="flushAll"><template #icon><icon-eraser /></template>清除</a-button>
          </a-input-group>
        </template>
        <!-- 工具按钮扩展 -->
        <template #tools>
          <a-tooltip :content="mode === 'list' ? '切换橱窗模式' : '切换列表模式' ">
            <a-button shape="circle" @click="switchMode"><icon-apps v-if="mode === 'list'" /><icon-list v-else /></a-button>
          </a-tooltip>
        </template>
        <!-- 自定义内容 -->
        <template #content="tableData">
          <a-checkbox-group v-if="mode === 'window'" v-model="selecteds" @change="handlerChange">
            <a-image-preview-group infinite>
              <a-space class="window-list ">
                <template v-for="record in tableData" :key="record.id">
                  <div class="mb-2 image-content">
                    <a-checkbox :value="record.id" class="checkbox">
                      <template #checkbox="{ checked }">
                        <a-tag :checked="checked" color="blue" checkable><icon-check /> 选择</a-tag>
                      </template>
                    </a-checkbox>
                    <a-image
                      width="190"
                      height="190"
                      show-loader
                      :title="record.object_name"
                      :description="`大小：${record.size_info}`"
                      :src="
                        /image/g.test(record.mime_type) ?
                        tool.attachUrl(record.url, getStoreMode(record.storage_mode))
                        : $url + 'not-image.png'
                      "
                    >
                      <template #extra>
                        <div class="actions">
                          <a-tooltip content="下载此文件">
                            <span class="action" @click="download(record)"><icon-download /></span>
                          </a-tooltip>
                          <a-tooltip>
                            <span class="action"><icon-info-circle /></span>
                            <template #content>
                              <div>存储名称：{{ record.object_name }}</div>
                              <div>存储目录：{{ record.storage_path }}</div>
                              <div>上传时间：{{ record.created_at }}</div>
                              <div>存储模式：{{ getStoreMode(record.storage_mode) }}</div>
                            </template>
                          </a-tooltip>
                        </div>
                      </template>
                    </a-image>
                  </div>
                </template>
              </a-space>
            </a-image-preview-group>
          </a-checkbox-group>
        </template>

        <!-- 预览内容自定义 -->
        <template #url="{ record }">
          <a-image
            class="list-image"
            v-if="/image/g.test(record.mime_type)"
            width="40px"
            height="40px"
            :src="tool.attachUrl(record.url, getStoreMode(record.storage_mode))"
          />
          <a-avatar v-else shape="square" style="top: 0px;">{{ record.suffix }}</a-avatar>
        </template>

        <!-- 操作列前置扩展 -->
        <template #operationBeforeExtend="{ record }">
          <a-link @click="download(record)"><icon-download /> 下载</a-link>
        </template>
      </ma-crud>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, reactive, computed, nextTick } from 'vue'
  import uploadConfig from '@/config/upload'
  import MaTreeSlider from '@cps/ma-treeSlider/index.vue'
  import attachment from '@/api/system/attachment'
  import commonApi from '@/api/common'
  import { useI18n } from 'vue-i18n'
  import { Message, Modal } from '@arco-design/web-vue'
  import tool from '@/utils/tool'

  const { t } = useI18n()
  const crudRef = ref()
  const mode = ref('list')
  const defaultKey = ref(['all'])
  const sliderData = ref([])
  const selecteds = ref([])

  onMounted(async () => {
    const treeData = await commonApi.getDict('attachment_type')
    treeData.data.unshift({ title: '所有', key: 'all' })
    sliderData.value = treeData.data
  })

  const handlerClick = async (value) => {
    defaultKey.value = value
    const type = value[0] === 'all' ? undefined : value[0]
    crudRef.value.requestParams.mime_type = type
    crudRef.value.refresh()
  }

  const switchMode = () => {
    mode.value = mode.value === 'list' ? 'window' : 'list'
  }

  const download = async (record) => {
    let url = ''
    let storeMode = getStoreMode(record.storage_mode)

    if (storeMode !== 'LOCAL') {
      Message.info('处理中...')
      const domain = upload.storage[storeMode]
      url = domain + record.url
    } else {
      //文件上传在本地则请求后端下载
      Message.info('请求服务器下载文件中...')
      url = 'system/downloadById?id=' + record.id
    }

    const response = await commonApi.download(url, 'get')
    if (response) {
      tool.download(response, (storeMode !== 'LOCAL') ? record.origin_name : '')
      Message.success('请求成功，文件开始下载')  
    } else {
      Message.error('文件下载失败')  
    }
  }

  const handlerChange = (val) => {
    selecteds.value = val
    crudRef.value.setSelecteds(val)
  }

  const selectAll = () => {
    crudRef.value.getTableData().map( item => selecteds.value.push(item.id) )
    crudRef.value.setSelecteds(selecteds.value)
  }

  const flushAll = () => {
    selecteds.value = []
    crudRef.value.setSelecteds([])
  }

  const getStoreMode = (mode) => {
    return uploadConfig.storageMode[mode.toString()]
  }

  const crud = reactive({
    api: attachment.getPageList,
    recycleApi: attachment.getRecyclePageList,
    searchColNumber: 3,
    requestParams: {},
    showIndex: false,
    pageLayout: 'fixed',
    rowSelection: { showCheckedAll: true },
    operationColumn: true,
    operationColumnWidth: 200,
    delete: {
      show: true,
      api: attachment.deletes, auth: ['system:attachment:delete'],
      realApi: attachment.realDeletes, realAuth: ['system:attachment:realDeletes']
    },
    recovery: { show: true, api: attachment.recoverys, auth: ['system:attachment:recovery']},
    isDbClickEdit: false,
  })

  const columns = reactive([
    // { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50 },
    { 
      title: '预览', dataIndex: 'url', width: 80,
    },
    { 
      title: '存储名称', dataIndex: 'object_name', width: 220,
    },
    { 
      title: '原文件名', dataIndex: 'origin_name', width: 150, search: true,
    },
    {
      title: '存储模式', dataIndex: 'storage_mode', width: 100, search: true, formType: 'select',
      dict: { name: 'upload_mode', props: { label: 'title', value: 'key' }, translation: true },
    },
    { 
      title: '资源类型', dataIndex: 'mime_type', width: 130,
    },
    { 
      title: '存储目录', dataIndex: 'storage_path', width: 130,
    },
    { 
      title: '文件大小', dataIndex: 'size_info', width: 130,
    },
    {
      title: '上传时间', dataIndex: 'created_at', width: 180,
      search: true, formType: 'range'
    },
  ])
</script>

<script>
export default { name: 'system:attachment' }
</script>

<style scoped>
/* :deep(.arco-image) {
  border-radius: var(--border-radius-medium);
}
:deep(.arco-image-with-footer-inner .arco-image-footer) {
  border-bottom-right-radius: var(--border-radius-medium);
  border-bottom-left-radius: var(--border-radius-medium);
} */
:deep(.arco-image-img) {
  object-fit: contain;
  background-color: var(--color-fill-4);
}
:deep(.arco-image-with-footer-inner .arco-image-footer) {
  padding: 9px;
}
:deep(.arco-image-footer-caption-title) {
  font-size: 14px;
}
:deep(.arco-image-footer-extra) {
  position: relative;
}
:deep(.arco-avatar-square) {
  top: -6px;
}
.window-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
}
.image-content {
  position: relative
}
.image-content .checkbox {
  position: absolute; z-index: 10;
  right: -16px; color: #fff;
}
:deep(.arco-tag-checkable) {
  color: #fff;
  background: rgba(0,0,0,.5);
}
/* :deep(.arco-tag-checkable:hover) {
  color: #555;
} */
.actions {
  display: flex;
  align-items: center;
  position:absolute;
  right: 9px; bottom: -24px;
}
.action {
  padding: 5px 4px;
  font-size: 14px;
  margin-left: 6px;
  border-radius: 2px;
  line-height: 1;
  cursor: pointer;
}
.action:first-child {
  margin-left: 0;
}

.action:hover {
  background: rgba(0,0,0,.5);
}
</style>